<template>
  <VCard title="Texts">
    <VCardText>
      <VRow no-gutters>
        <VCol
          cols="12"
          md="2"
        >
          <span class="text-subtitle-1">text-subtitle-1</span>
        </VCol>
        <VCol
          cols="12"
          md="10"
          class="mb-6"
        >
          <p class="text-subtitle-1 mb-1">
            Cupcake ipsum dolor sit amet fruitcake donut chocolate.
          </p>
          <span>font-size: 1rem / line-height: 1.75rem / font-weight: 400</span>
        </VCol>

        <VCol
          cols="12"
          md="2"
        >
          <span class="text-subtitle-2">text-subtitle-2</span>
        </VCol>
        <VCol
          cols="12"
          md="10"
          class="mb-6"
        >
          <p class="text-subtitle-2 mb-1">
            Cupcake ipsum dolor sit amet fruitcake donut chocolate.
          </p>
          <span>font-size: 0.875rem / line-height: 1.32rem / font-weight: 500</span>
        </VCol>

        <VCol
          cols="12"
          md="2"
        >
          <span class="text-body-1">text-body-1</span>
        </VCol>
        <VCol
          cols="12"
          md="10"
          class="mb-6"
        >
          <p class="text-body-1 mb-1">
            Cupcake ipsum dolor sit amet fruitcake donut chocolate.
          </p>
          <span>font-size: 0.9375rem / line-height: 1.375rem / font-weight: 400</span>
        </VCol>

        <VCol
          cols="12"
          md="2"
        >
          <span class="text-body-2">text-body-2</span>
        </VCol>
        <VCol
          cols="12"
          md="10"
          class="mb-6"
        >
          <p class="text-body-2 mb-1">
            Cupcake ipsum dolor sit amet fruitcake donut chocolate.
          </p>
          <span>font-size: 0.8125rem / line-height: 1.25rem / font-weight: 400</span>
        </VCol>

        <VCol
          cols="12"
          md="2"
        >
          <span class="text-caption">text-caption</span>
        </VCol>
        <VCol
          cols="12"
          md="10"
          class="mb-6"
        >
          <p class="text-caption mb-1">
            Cupcake ipsum dolor sit amet fruitcake donut chocolate.
          </p>
          <span>font-size: 0.6875rem / line-height: 0.875rem / font-weight: 400</span>
        </VCol>

        <VCol
          cols="12"
          md="2"
        >
          <span class="text-overline">text-overline</span>
        </VCol>
        <VCol
          cols="12"
          md="10"
          class="mb-6"
        >
          <p class="text-overline mb-1">
            Cupcake ipsum dolor sit amet fruitcake donut chocolate.
          </p>
          <span>font-size: 0.75rem / line-height: 2.66rem / font-weight: 500</span>
        </VCol>

        <VCol
          cols="12"
          md="2"
        >
          <span class="text-button">text-button</span>
        </VCol>
        <VCol
          cols="12"
          md="10"
        >
          <p class="text-button mb-1">
            Cupcake ipsum dolor sit amet fruitcake donut chocolate.
          </p>
          <span>font-size: 0.9375rem / line-height: 1.125rem / font-weight: 500</span>
        </VCol>
      </VRow>
    </VCardText>
  </VCard>
</template>
